import React, { Component } from 'react';

// App 是父组件
export class App extends Component {
  state = {
    // 数据中介（状态提升到父组件）
    msg: '',
  };

  // child2 给父组件传递数据的方法
  setMsg = (msg) => {
    console.log('child2 传递给父组件的数据', msg);
    this.setState({
      msg: msg,
    });
  };

  render() {
    return (
      <div style={{ border: '1px solid green', padding: '16px' }}>
        <h1>我是App（爹）组件</h1>
        {/* 兄弟组件1，接收消息 */}
        <Child1 msg={this.state.msg}></Child1>
        {/* 兄弟组件2，发送消息 */}
        <Child2 setMsg={this.setMsg}></Child2>
      </div>
    );
  }
}

class Child1 extends React.Component {
  render() {
    return (
      <div style={{ border: '1px solid red', margin: '16px', padding: '16px' }}>
        Child1, 这是 Child2 传递来的消息：{this.props.msg}
      </div>
    );
  }
}

class Child2 extends React.Component {
  render() {
    return (
      <div
        style={{ border: '1px solid blue', margin: '16px', padding: '16px' }}
      >
        Child2
        <button onClick={() => this.props.setMsg('你好')}>
          传消息到child1组件
        </button>
      </div>
    );
  }
}
